<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02jq对象和DOM对象区别</title>
</head>
<body>

    <ul>
        <li id="cloth">衣服</li>
        <li>裤子</li>
        <li>鞋子</li>
        <li id="laji">傻逼</li>
    </ul>
    
    
    <script src="../jquery-3.2.1.js"></script>
    <script>
        
        $(function(){
            // DOM对象：使用js的方式获取到的元素都是
            var cloth = document.getElementById("cloth");
            cloth.style.backgroundColor="pink";

            // jq对象：使用jq的方式获取到的元素就是jq对象
            var $li = $("li");
            $li.text("我最帅");

            // DOM对象调用jq对象方法 需要把DOM对象转换为jq对象
            var laji = document.getElementById("laji");
            $(laji).text("辣鸡");

            // jq对象调用DOM对象方法 需要把jq对象转换为DOM对象
            var $li = $("li");
            $li[0].style.color='yellow';
            
        })
        
    </script>

</body>
</html>